// 首页逻辑


//0.元素获取
const inp = document.querySelector('.search_top input');
const ul = document.querySelector('.search_top>ul');
const offBox = document.querySelector('.off');
const onBox = document.querySelector('.on');
const regi = document.querySelector('.regi');
const btnBox = document.querySelector('.login')
const span = document.querySelector('.head_img span');
const goods = document.querySelector('.goods_list>.goods')
const loveBox = document.querySelector('.love');
const sarInp = document.querySelector('.sar');



 
// 1.搜索引擎
inp.addEventListener('input', () => {
    const text = inp.value;
    const script = document.createElement('script');
    script.src = "https://suggest.taobao.com/sug?code=utf-8&q=" + text + "&_ksTS=1624112642752_267&callback=fn&k=1&area=c2c&bucketid=8";
    document.body.appendChild(script);
    script.remove();
})
function fn(res) {
    console.log(res)
    if(res.result.length === 0){
        ul.style.display = 'none';
        return;
    }
    let str = '';
    res.result.forEach(item => {
        str += `<li>${item[0]}</li>`
    })
    ul.innerHTML = str;
    ul.style.display = 'block';

}

ul.addEventListener('click', function(e) {
    e = e || window.event;
    const target = e.target || e.srcElement;
    if(target.tagName === 'LI') {
        sarInp.value = target.innerText;
        this.style.display = 'none';
    }
})


//2.二级菜单
const data = {0:[
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}],
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}],
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}],
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}],
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}],
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}],
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}],
               [["流行趋势"],{"0":"小黑裙","1":"芭比裤","2":"阔腿神裤","3":"宝藏羊毛","4":"毛衣外套","5":"西装大衣","6":"无钢圈文胸","7":"美背文胸"}], 
            ]
            }

$('.sortBanner>.sort>li').on({
    mouseover() {
        let str = '';
        const result = data[0]
        for(let i = 0; i<result.length; i++) {
            str += 
            `
            <div>
                <h3>${result[i][0]}</h3>
                <ul>
            `
            for( let key in result[i][1]){
                str += `<li>${result[i][1][key]}</li>`              
            }
            str += `
                </ul>     
            </div>
            `
        }
        $('.resort').eq($(this).index()).html(str).show().parent().siblings().find('.resort').hide();
    },
    mouseout() {
        $(this).find('.resort').hide();
    }
})


//3.轮播图
var mySwiper = new Swiper ('.swiper-container', {
    autoplay: true,
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  }) 
  
  
//4.显示登录信息
show();
async function show() {
    const id = window.localStorage.getItem('id');
    const token = window.localStorage.getItem('token');
    if(!id || !token) return;
    //发送请求，请求用户详细信息
    const res = await pAjax({
        url: 'http://localhost:8888/users/info',
        data: `id=${id}`,
        token,
        dataType: 'json'
    })
    if(res.code === 1) {
        onBox.innerText = res.info.nickname;
        span.innerText = res.info.nickname;
        onBox.classList.add('active');
        offBox.classList.remove('active');
        //让一系列元素消失
        regi.style.visibility = 'hidden';
        btnBox.style.display = 'none';
    }
}

//5.渲染商品

getGoodsList();
function getGoodsList() {
    const script = document.createElement('script');
    script.src = "https://list.mogu.com/search?callback=haowan&_version=8193&ratio=3%3A4&cKey=15&page=5&sort=pop&ad=0&fcid=50240&action=clothing&acm=3.mce.1_10_1ko4s.132244.0.yA8EpsAXgce0V.pos_871-m_482170-sd_119&ptp=31.v5mL0b._head.0.xJD3rJv9&_=1624263213812";
    document.body.appendChild(script);
    script.remove()
}
function haowan(res) {
    console.log(res);
    const {result} = res;
    let str = ''
    result.wall.docs.forEach(item => {
        str += `
        <div>
            <p class="pic"><img src="${item.img}" alt=""></p>
            <p class="txt">
                ${item.title}
            </p>
            <div class="jiage">
                <p class="price">￥${item.price}</p>
                <p class="purse">${item.sale}人购买</p>
            </div>
            <div class="mask">
                <button>查找相似</button>
            </div>
        </div>
        
        `
    })
    goods.innerHTML = str;
}
 








//点击按钮，实现页面跳转
btnBox.addEventListener('click', e => {
    e = e || window.event;
    const target = e.target || e.srcElement;
    if(target.className === 'log') window.location.href = './login.html';
    if(target.className === 'reg') window.location.href = './register.html';


})



//7.楼层导航
// 7-1.点击ol>li,页面滚动到对应区域
$('ol>li').click(function() {
    window.scrollTo({
        top: $('.photos').nextUntil('ol').eq($(this).index()).offset().top,
        behavior: 'smooth'
    })
})
window.onscroll = function() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    for(let i = 0; i<$('ol>li').length; i++) {
        if($('.photos').nextUntil('ol').eq(i).offset().top <= scrollTop) {
            $('ol>li').eq(i).addClass('active').siblings().removeClass('active');
        }
    }
    if(scrollTop >= $('.love').offset().top) {
        $('.rtop').css('display', 'block');
       
    }else{
        $('.rtop').css('display', 'none');
    }
   

}
$('.rtop').click(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
})


// 8.点击一级菜单，页面跳转到列表页
$('.sort>li').click(function() {
    window.location.href = './list.html';
})

